<template>
  <div class="box">
    <span class="meeting-title"> 通知公告</span>
    <div class="readStatus">
      <div class="readStatus-box"
           :class="{'click-readStatus' : ifread === 0}"
           @click="ifreadClick(0)">未读</div>
      <div class="readStatus-box"
           :class="{'click-readStatus' : ifread === 1}"
           @click="ifreadClick(1)">已读</div>
    </div>
    <div class="info">
      <div class="info-box"
           v-if="ifread === 0"
           v-for="(item,index) in unreadList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
           :key="index">
        <div class="info-box-left">{{ item.announcementSubject }}</div>
        <div class="info-box-right">
          <span class="info-time"
                v-if="item.updateDate">{{ diffTime(item.updateDate) }}</span>
          <span class="info-button"
                @click="openInfo(item)">查看</span>
        </div>
      </div>
      <div class="
                info-box"
           v-if="ifread === 1"
           v-for="(item,index) in readList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
           :key="index">
        <div class="info-box-left">{{ item.announcementSubject }}</div>
        <div class="info-box-right">
          <span class="info-time"
                v-if="item.updateDate">{{ diffTime(item.updateDate) }}</span>
          <span class="info-button"
                @click="openInfo(item)">查看</span>
        </div>
      </div>
    </div>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next"
                   :total="total">
    </el-pagination>

    <announcementInfo ref="announcementInfo"
                      @callBack="getAnnouncement" />
  </div>
</template>

<script>
import announcementInfo from './announcement-info.vue'
export default {
  data () {
    return {
      ifread: 0,
      dataList: [],
      readList: [],
      unreadList: [],
      total: 0,
      pagesize: 10,
      currentPage: 1
    }
  },
  components: {
    announcementInfo
  },
  mounted () {
    this.getAnnouncement()
  },
  methods: {
    getAnnouncement () {
      this.$http.get('tb/noticeAnnouncement/listQuery').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (this.readList.length === 0 && this.unreadList.length === 0) {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].viewStatus === '1') {
              this.readList.push(res.data[i])
            } else {
              this.unreadList.push(res.data[i])
            }
          }
        }
        // this.dataList = res.data
        // this.total = res.data.length
        this.dataList.sort(function (a, b) {
          return b.updateDate < a.updateDate ? -1 : 1
        })
        this.unreadList.sort(function (a, b) {
          return b.createDate < a.createDate ? -1 : 1
        })
        this.ifreadClick(0)
        // console.log(this.dataList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize))
        // this.pageSize = res.data.pageSize
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange (val) {
      this.pagesize = val
    },
    diffTime (time) {
      var content = ''
      var minute = 1000 * 60
      var hour = minute * 60
      var day = hour * 24
      //   var halfamonth = day * 15
      var month = day * 30

      var ctime = new Date(time).getTime()
      var now = new Date().getTime()
      var diffValue = now - ctime

      var monthC = diffValue / month
      //   var weekC = diffValue / (7 * day)
      var dayC = diffValue / day
      var hourC = diffValue / hour
      var minC = diffValue / minute
      if (parseInt(monthC) >= 1) {
        content = parseInt(monthC) + '个月前'
      } else if (parseInt(dayC) > 1) {
        content = parseInt(dayC) + '天前'
      } else if (parseInt(dayC) === 1) {
        content = '昨天'
      } else if (parseInt(hourC) >= 1) {
        content = parseInt(hourC) + '小时前'
      } else if (parseInt(minC) >= 1) {
        content = parseInt(minC) + '分钟前'
      } else {
        content = '刚刚'
      }
      return content
    },
    ifreadClick (id) {
      if (id === 0) {
        this.ifread = 0
        this.total = this.unreadList.length
      } else {
        this.ifread = 1
        this.total = this.readList.length
      }
    },
    openInfo (_id) {
      if (_id) {
        this.$refs.announcementInfo.init(_id)
      } else {
        this.$refs.announcementInfo.init()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 340px;
  padding: 10px 0 0 10px;
  overflow: hidden;
  position: relative;
  .meeting-title {
    color: #333;
    line-height: 40px;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .readStatus {
    display: flex;
    flex-direction: row;
    height: 15px;
    font-size: 18px;
    color: #333;
    .readStatus-box {
      width: 80px;
      height: 20px;
      text-align: center;
    }
    .click-readStatus {
      color: #009dff;
    }
    .click-readStatus::after {
      content: "";
      width: 50px;
      height: 4px;
      background-color: #009dff;
      display: block;
      margin: 0 auto;
      position: relative;
      top: 5px;
    }
  }
  .info {
    // display: flex;
    // flex-direction: column;
    // justify-content: start;
    padding: 20px;
    height: 230px;
    width: 100%;
    overflow-y: scroll;
    margin-top: 30px;
    .info-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 18px;
      // width: 100%;
      .info-button {
        width: 80px;
        height: 30px;
        display: inline-block;
        text-align: center;
        border: 1px solid #9d9d9d;
        color: #7ed8ed;
        line-height: 30px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
div::-webkit-scrollbar {
  display: none;
}
</style>
